<template>
  <div>
    <h1>【aty-captcha-slide】 component demo</h1>
    <p>【aty-captcha-slide】 本质，滑动滑块验证，默认误差在5像素内</p>
    <aty-row class="v-captcha-wrapper">
      <aty-title level="4">1. 【aty-captcha-slide】 基础 - 默认显示</aty-title>
      <aty-captcha-slide />
    </aty-row>
    <aty-row class="v-captcha-wrapper">
      <aty-title level="4">2. 【aty-captcha-slide】 鼠标悬浮显示</aty-title>
      <aty-captcha-slide trigger="hover" />
    </aty-row>
    <aty-row class="v-captcha-wrapper">
      <aty-title level="4">3. 【aty-captcha-slide】 自定义提示文字</aty-title>
      <aty-captcha-slide trigger="hover"
                         slider-text="Vinsea"
                         success-text="验证成功提示文字123"
                         fail-text="失败了" />
    </aty-row>
    <aty-row class="v-captcha-wrapper">
      <aty-title level="4">4. 【aty-captcha-slide】 自定义大小</aty-title>
      <aty-title level="5" class="v-captcha-warning">修改组件宽度，等比放大/缩小，建议使用默认大小：</aty-title>
      <ul class="v-captcha-list">
        <li>目前互联网上的基本都是 300*150</li>
        <li>若没有等比例修改宽高，会导致图片变形，影响计算</li>
        <li>如果该组件宽高和视觉效果不符，可以修改为点击弹出验证框的交互方式</li>
      </ul>
      <aty-captcha-slide :width="500" />
    </aty-row>
  </div>
</template>
<script>

export default {
  components: {},
  data () {
    return {
    }
  },
  methods: {}
}
</script>
<style lang="less" type="text/less" scoped>
    .v-captcha-wrapper {
        text-align: left;
        padding: 20px;
    }

    .v-captcha-list {
        padding-bottom: 10px;
    }

    .v-captcha-warning {
        color: red;
    }

</style>
